Photo by Onni Anttoora on Unsplash

加個動畫

Button("Try again") {
    withAnimation {
        selected = activities.randomElement() ?? "ArtisticSwimming"
    }
}
.buttonStyle(.borderedProminent)

使動畫逐漸出

withAnimation(.easeInOut(duration: 1)) {
    
}

在 SwiftUI 中，你可以使用多種內建的動畫時間曲線，也可以自定義你的時間曲線。以下是一些常見的時間曲線及其描述：

1. easeInOut: 這是一個加速然後減速的時間曲線。它在開始時慢慢地移動，然後加速，並在結束時再次減速。這是預設的時間曲線。

   .animation(.easeInOut(duration: 1))
   

2. easeIn: 這個動畫在開始時是緩慢的，然後加速到結束。

   .animation(.easeIn(duration: 1))
   

3. easeOut: 這個動畫在開始時快速移動，然後減速到結束。

   .animation(.easeOut(duration: 1))
   

4. linear: 這是一個恆定速度的動畫，從頭到尾都沒有加速或減速。

   .animation(.linear(duration: 1))
   

5. timingCurve: 如果內建的時間曲線不符合你的需求，你可以使用 timingCurve(_: _: _: _: duration:) 函數來自定義貝茲曲線。這需要四個參數（控制點的 x 和 y 值）以及一個持續時間。

   .animation(
       Animation.timingCurve(0.2, 0.8, 0.2, 1, duration: 1)
   )
   
   

使用這些時間曲線可以幫助你創建更自然、更吸引人的動畫效果。

緩動函數 (Easing function) 能夠調整數值變化的速度。

現實生活中的物體不會以等速移動，也不會突然開始或停止。例如我們自由式手部划水動作由空中入水 🏊🏻‍♂️，首先身體會加速， 然後慢下來。🏊🏻‍♂️ 🏊🏻‍♂️  🏊🏻‍♂️  🏊🏻‍♂️  🏊🏻‍♂️🏊🏻‍♂️🏊🏻‍♂️🏊🏻‍♂️

下圖是animation函數的對照表。

Ref

淡入淡出的效果是因為 SwiftUI 偵測到背景色、圖標和文字正在變化，所以它會移除舊的視圖並用新的視圖取代。之前我讓你創建了一個內部的 VStack 來容納這三個視圖，現在你可以明白為什麼：我們將告訴 SwiftUI 這些視圖可以被識別為一個單一的組，並且這個組的識別符可以隨時間變化。

為了實現這一點，我們需要先在視圖中定義更多的程式狀態。這將是我們內部的標識符VStack，因為它會隨著我們的程式運行而改變，所以我們將使用@State. 新增此屬性旁邊selected：

@State private var id = 1

接下來，我們可以告訴 SwiftUI 在每次按下按鈕時更改該標識符，如下所示：

Button("Try again") {
    withAnimation(.easeIn(duration: 1)) {
        selected = activities.randomElement() ?? "ArtisticSwimming"
        id += 1
     }
}
.buttonStyle(.borderedProminent)

最後，我們可以使用 SwiftUI 的id()修飾符將該標識符附加到整個內部VStack，這意味著當標識符更改時，SwiftUI 應該將整體視為VStack新的。這將使其對舊的VStack被刪除和新的VStack添加進行動畫處理，而不僅僅是其中的各個視圖。更好的是，我們可以使用修飾符控制來添加和刪除過渡的發生方式transition()，該修飾符具有我們可以使用的各種內建過渡。

把兩個修飾符新增至 中間 VStack

.transition(.slide)
.id(id)

VStack {
    Circle()
		/.../

    Text("\(selected)!")
		/.../
}
.transition(.scale)
.id(id)

請問有人在實務上會每個頁面做動畫效果嗎？